<template>
    <div>
        <h1>编辑考勤信息</h1>
        <el-card>
            <div>课程名称：{{ courseInfo.courseName }}</div>
            <div>周次：第{{ courseInfo.week }}周</div>
            <div>星期几：周{{ courseInfo.day }}</div>
            <div>节次：{{ courseInfo.startPeriod }} - {{ courseInfo.endPeriod }}节</div>
        </el-card>

        <el-table :data="studentList" style="margin-top: 20px;">
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="number" label="学号" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column label="出勤状态">
                <template #default="scope">
                    <el-select v-model="scope.row.status" placeholder="请选择状态">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin-top: 20px; text-align: right;">
            <el-button type="primary" @click="submitAttendance">提交考勤</el-button>
        </div>
    </div>
</template>

<script>
import service from '@/api';

export default {
    data() {
        return {
            courseInfo: {
                courseName: '',
                week: '',
                day: '',
                startPeriod: '',
                endPeriod: ''
            },
            studentList: [],
            statusOptions: [
                { value: '已签到', label: '已签到' },
                { value: '迟到', label: '迟到' },
                { value: '早退', label: '早退' },
                { value: '缺勤', label: '缺勤' },
                { value: '请假', label: '请假' }
            ]
        };
    },
    async created() {
        const courseId = this.$route.params.id;
        await this.fetchCourseInfo(courseId);
        await this.fetchStudentList(courseId);
    },
    methods: {
        async fetchCourseInfo(courseId) {
            this.courseInfo = await service.get(`/api/courses_schedule/${courseId}`, null, '获取课程信息');
        },
        async fetchStudentList(courseId) {
            const response = await service.get(`/api/attendance/week/${this.courseInfo.week}/day/${this.courseInfo.day}`, null, '获取学生列表');
            this.studentList = response.map(item => ({
                id: item.student.id,
                number: item.student.number,
                name: item.student.name,
                status: item.status || '已签到'
            }));
        },
        async submitAttendance() {
            const attendance = {
                courseId: this.$route.params.id,
                attendances: this.studentList.map(student => ({
                    studentId: student.id,
                    status: student.status
                }))
            };
            await service.post('/api/attendance/batch', attendance, '提交考勤信息');
            this.$message.success('考勤信息提交成功');
        }
    }
};
</script>

<style scoped>
h1 {
    margin-bottom: 20px;
}

.el-card {
    margin-bottom: 20px;
}
</style>